<template>
	<div class="homesystem">
		
		<div v-for="(item,index) in list.slice((listCurrentPage-1)*9,listCurrentPage*9)" :class="['sys','sys'+(index+1)]">
			<div   @dblclick="dblclick(item)" @click="click(item)">
					{{item.systemName}}
			</div>
		</div>

		<div v-for="(item,index) in list1.slice((list1CurrentPage-1)*6,list1CurrentPage*6)" :class="['sys','osys'+(index+1)]">
			<div  @dblclick="dblclick(item)" @click="click(item)">
				{{item.systemName}}
			</div>
		</div>
<div class="query">
		<el-form :inline="false" label-width="80px" size="mini" ref="form" :model="query.body"
			style="width:280px;margin:auto;margin-top: 0px;">

			<el-form-item label="选择系统:" prop="roleName">
				<el-select v-model="query.body.systemNo" style="width: 100%" filterable remote clearable reserve-keyword
					placeholder="请输入系统编号或名称" :remote-method="getsystems" @change="changeValue()">
					<el-option v-for="item in systemList" :key="item.systemNo" :label="item.systemName"
						:value="item.systemNo">
						{{ item.systemName }}({{item.systemNo}})
						
					</el-option>
				</el-select>
			</el-form-item>
		</el-form> 
</div>
	</div>
</template>

<script>
	"use strict";
	import {
		getInteractedSystemListByPage
	} from '@/api/service.js';
	export default {
		data() {
			return {
				query: {
					body: {
						systemNo: ''
					},
					pageNum: 1,
					pageSize: 5000
				},
				list: [],
				list1: [],
				
				listCurrentPage:1,
				list1CurrentPage:1,
				timer:''
				
				
			};
		},
		created() {
			this.changeValue();
			this.startTime();
		},
		methods: {
			
			click(item){
				if(this.timer!=''){
					clearTimeout(this.timer);
				}
				timer = setTimeout(()=>{
					this.systemList = this.systemListAll;
					this.query.body.systemNo = item.systemNo;
					this.changeValue();
				},300)
			},
			dblclick(item){
				if(this.timer!=''){
					clearTimeout(this.timer);
				}
				this.$router.push({
					name: 'systemDetails',
					query: Object.assign(item)
				})
			},

			changeValue() {
				this.list = [];
				this.list1 = [];
				getInteractedSystemListByPage(this.query).then(response => {
					let interactedSystemList = [];
					interactedSystemList = response.data.extend.list;
					
					this.list= interactedSystemList.filter(item=>item.systemType=='01');
					this.list1= interactedSystemList.filter(item=>item.systemType=='02');
						//console.info(interactedSystemList);
					
					//console.info(this.list);
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			startTime(){
				setInterval(this.listTime,5000);
				setInterval(this.list1Time,5000);
			},
			
			listTime(){
				if(this.listCurrentPage * 9 < this.list.length){
					this.listCurrentPage = this.listCurrentPage + 1;
				}else{
					this.listCurrentPage = 1;
				}
			},
			
			list1Time(){
				if(this.list1CurrentPage * 6 < this.list1.length){
					this.list1CurrentPage = this.list1CurrentPage + 1;
				}else{
					this.list1CurrentPage = 1;
				}
			}
		}

	}
</script>

<style>
	.homesystem {
		background-image: url("@/assets/img/sy_gif.gif");
		height: 440px;
		width: 1370px;
		margin: auto;
		background-color: antiquewhite;
	}
	
	.query{
		position: relative;
		display: inline-block;
		height: 0;
		width: 0;
		font-size: 12px;
		top:10px;
		left:calc( 50% - 140px );
	}

	.sys {
		position: relative;
		display: inline-block;
		height: 0;
		width: 0;
		font-size: 12px;
	}

	.sys div {
		/* width: 120px;
		height: 20px; */
		display: block;
		width: 104px;
		height: 26px;
		line-height: 26px;
		background-image: url("@/assets/img/img_sy_xtbg1.png");
		background-size: 100% 100%;
		text-align: center;
		cursor: pointer;
	}

	.sys div:hover {
		background-image: url("@/assets/img/img_sy_xtbg2.png");
	}

	.sys1 {
		top: 119px;
		left: 349px;
	}

	.sys2 {
		top: 191px;
		left: 314px;
	}

	.sys3 {
		top: 264px;
		left: 321px;
	}

	.sys4 {
		top: 337px;
		left: 350px;
	}

	.sys5 {

		top: 43px;
		left: 225px;

	}

	.sys6 {
		top: 123px;
		left: 181px;
	}

	.sys7 {
		top: 210px;
		left: 148px;
	}

	.sys8 {
		top: 290px;
		left: 173px;
	}

	.sys9 {
		top: 375px;
		left: 200px;
	}

	.osys1 {
		top: 148px;
		left: 941px;
	}

	.osys2 {
		top: 229px;
		left: 959px;
	}

	.osys3 {
		top: 315px;
		left: 946px;
	}

	.osys4 {
		top: 90px;
		left: 1092px;
	}

	.osys5 {

		top: 229px;
		left: 1122px;

	}

	.osys6 {
		top: 358px;
		left: 1100px;
	}
</style>
